<template>
  <div>
    <div class="border-b h-fit flex flex-col justify-center items-start w-full">
      <!-- 回复人 + 回复内容 -->
      <div :class="[{'truncate': show},'break-words break-all w-full h-auto text-left ']">{{
          props.reply?.['replyId'] == props.comment.id && props.isNotToReply ?
              (
                  replyUser?.['username'] +
                  " : " +
                  props.reply?.['content']
              )
              :
              (
                  replyUser?.['username'] + " 回复 " + props.comment?.['userId'] +
                  " : " +
                  props.reply?.['content']
              )
        }}
      </div>
      <!--  展开回复   -->
      <div v-if="props.reply?.content?.['length'] > 50" class="cursor-pointer">
        <div v-if="show==false" @click="show=true" :class="['text-xs text-primary']">收缩</div>
        <div v-else @click="show=false" :class="['text-xs text-primary']">展开</div>
      </div>
      <div  v-if="useAuthStore().isAuthenticated" class="w-full flex flex-row justify-start items-center gap-2">
        <label :for="'reply' + props.reply.id">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
               class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/>
          </svg>
        </label>
        <label v-if="props.reply?.['userId'] == hook_getUser()?.['id']" :for="'comment' + props.reply?.['id'] " class="rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
          </svg>
        </label>
        <!-- 删除评论 -->
        <input type="checkbox" :id="'comment' + props.reply?.['id']" class="modal-toggle" />
        <div class="modal">
          <div class="modal-box">
            <h3 class="font-bold text-lg">是否删除评论？</h3>
            <div class="modal-action">
              <label :for="'comment' + props.reply?.['id']" class="btn">取消</label>
              <label @click="removeReply()" :for="'comment' + props.reply?.['id']" class="btn btn-error">删除</label>
            </div>
          </div>
        </div>
      </div>

      <!-- Put this part before </body> tag -->
      <input type="checkbox" :id="'reply' + props.reply.id" class="modal-toggle"/>
      <div class="modal">
        <div class="modal-box">
          <h3 class="font-bold text-lg">{{ "回复用户：" + replyUser?.['username'] }}</h3>
          <p class="py-4">This modal works with a hidden checkbox!</p>
          <textarea v-model="comments.content"
                    @click=""
                    class="textarea textarea-bordered w-full max-w-xs h-12 max-h-32"
                    placeholder="Bio">
          </textarea>
          <div class="modal-action">
            <label :for="'reply' + props.reply.id" class="btn">取消</label>
            <label @click="addComments" :for="'reply' + props.reply.id" class="btn btn-primary">确认</label>
          </div>
        </div>
      </div>
    </div>
    <replay v-if="replys?.['length'] > 0"
            v-for="(reply,index) in replys"
            :key="index"
            :is-not-to-reply="false"
            :comment="props.reply"
            @deleteReply="replys=[]"
            :reply="reply" class="ml-4">
    </replay>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {
  Comments,
  Comments_addComments, Comments_deleteCommentsById,
  Comments_findReplyListFromCommentsByReplyId,
  Type
} from "../hook/CommentsHook.ts";
import {hook_findUserById, hook_getUser} from "../hook/UserHook.ts";
import {useAuthStore} from "../plugins/pinia.ts";

let props = defineProps<{
  reply
  comment
  isNotToReply?
}>()

let emit = defineEmits<{
  (e:'deleteReply')
}>()
onMounted(async () => {
  await getToReplays()
  await getReplyUser()
})

let show = ref(true);

let replys = ref<Array<any>>([])

async function getToReplays() {
  let promise = await Comments_findReplyListFromCommentsByReplyId(props.reply?.['id']);
  replys.value = <Array<any>>promise
}

let replyUser = ref()
async function getReplyUser() {
  await hook_findUserById(props.reply?.['userId'], cb => {
    replyUser.value = cb
  })
}

let comments = ref<Comments>(new Comments());
async function addComments() {
  comments.value.type = Type.Reply
  comments.value.userId = hook_getUser()?.['id']
  comments.value.replyId = props.reply?.['id']

  console.log(comments.value)

  await Comments_addComments(comments.value)
  comments.value = new Comments();
  await getToReplays()
}
async function removeReply() {
  await Comments_deleteCommentsById(props.reply.id)
  emit('deleteReply')
}
</script>

<style scoped>

</style>